<script setup>
import qq from "@/assets/icons/qq.png"
import bili from "@/assets/icons/bili.png"
import gitee from "@/assets/icons/gitee.png"
import email from "@/assets/icons/email.png"
import browser from "@/assets/icons/browser.png"
import phone from "@/assets/icons/phone.png"
import youtube from "@/assets/icons/youtube.png"
import date from "@/assets/icons/date.png"
const concactIcons = ref([
    {
        img: gitee,
        text: "Gitee",
    },
    {
        img: bili,
        text: "Bilibili",
    },
    {
        img: qq,
        text: "QQ",
    },
    {
        img: email,
        text: "邮件",
    },
    {
        img: browser,
        text: "个人博客",
    },

    {
        img: youtube,
        text: "Youtube",
    },
    {
        img: phone,
        text: "通讯录",
    },
    {
        img: date,
        text: "日历",
    },
])
</script>
<template>
    <div class="main">
        <h1>联系我</h1>
        <div class="boxs">
            <div class="box" v-for="(item, index) in concactIcons" :key="index">
                <div class="img"><img :src="item.img" alt=""></div>
                <p>{{ item.text }}</p>
            </div>
        </div>
    </div>
</template>
<style lang="scss" scoped>
.main {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 200px 0;

    .boxs {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        width: 50%;
        height: 500px;

        .box {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            gap: 8px;
            width: 100px;
            height: 140px;
            margin: 40px;
            cursor: pointer;

            .img {
                display: flex;
                justify-content: center;
                align-items: center;
                width: 100px;
                height: 100px;
                border-radius: 20px;
                /* 盒子阴影 */
                box-shadow: 18px 18px 30px rgba(0, 0, 0, 0.2),
                    -18px -18px 30px rgba(255, 255, 255, 1);
                /* 过渡时间 ease-out是指先快速 后慢速 */
                transition: all 0.2s ease-out;

                img {
                    width: 60px;
                    transition: all 0.2s ease-out;
                }

                &:hover {
                    /* inset 是内部阴影 默认是外部阴影outset */
                    box-shadow: 0 0 0 rgba(0, 0, 0, 0.2), 0 0 0 rgba(255, 255, 255, 0.8),
                        inset 18px 18px 30px rgba(0, 0, 0, 0.1),
                        inset -18px -18px 30px rgba(255, 255, 255, 1);

                    img {
                        width: 58px;
                    }
                }
            }

            p {
                color: rgb(255, 255, 255);
            }
        }

        @media (max-width: 820px) {
            & {
                width: 80%;
                height: auto;

                .box {
                    margin: 20px;
                }
            }
        }
    }
}
</style>